import React from 'react'

export default class ComponentA extends React.Component {
  constructor(){
    super()
    this.state = {
       initCount:this.$store.getState().count
    }

    // 在组件中监听state数据的改变
    this.$store.subscribe(()=>{
      console.log(this.$store.getState())
      this.setState({
        initCount:this.$store.getState().count
      })
    })
  }
  render(){
    return <div className="box" style={{backgroundColor:'pink'}}>
        <h3>A组件</h3>
        <p>{this.state.initCount}</p>
        <button onClick={()=>this.increment()}>增加</button>
        <button onClick={()=>this.decrement()}>减少</button>
    </div>
  }

  increment = () => {
    // 调用redux的api修改state中的数据
    // this.$store.dispatch({type:'increment',payload:1})提交action(要对数据做哪种操作,传给reducer的具体数据)
    this.$store.dispatch({
      type:'increment',
      payload:1
    })
  }

  decrement = () => {
    // this.$store.dispatch({type:'decrement'})
    this.$store.dispatch({
      type:'decrement',
      payload:5
    })
  }
}